Leo's Space

我寫故我在

0%

[Day9] 操作頁面行為(v-on)

發表於 更新於 分類於 ， Disqus：
文章字數： 1.5k 所需閱讀時間 ≈ 1 分鐘

方法綁定按鈕

假如我們要在 Vue 中使用自定義的方法，此時我們可以在宣告好的 Vue 物件底下加上 methods，而 methods 裡面就可以用物件的方式宣告自定義的方法，如程式範例的 reverse 方法，並且用 Vue 的 v-on 指令將 button 還有 reverse 方法綁定，此時當我們點擊 button 就可以看到 console 跳出 test 文字，代表按鈕和方法有綁定成功。

1
2
3
4
5
6
<body>
    <div class="app">
        {{text}}
        <button v-on:click="reverse">反轉字串</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:'1234'
        },
        methods: {
            reverse:function (){
                console.log('test');
            }
        }
    });
</script>

反轉字串邏輯

https://i.imgur.com/4FlP8b1.png

1
2
3
4
5
6
<body>
    <div class="app">
        {{text}}
        <button v-on:click="reverse">反轉字串</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            text:'1234'
        },
        methods: {
            reverse:function (){
                this.text=this.text.split('').reverse().join('');
            },
        }
    });
</script>

接下來我們來實作一個反轉字串的方法，我們會使用到 js 內建的函式庫來完成這個方法。

  • split ()

    • 將字串分割成更小的字串，用陣列方式回傳。參數內如果使用 “” 空字符的話，將會以每個字符(字母)為分割單位。

  • reverse ()

    • 反轉原本陣列中的元素順序，不會創建新陣列。

  • join ()

    • 將陣列元素合併成一個字串。參數內如果使用 “” 空字符的話，將不會在陣列元素之間加入任何符號，而直接合成一個字串。如果參數是用 “,” ，則陣列元素合成字串時會用逗號隔開。

  • this 關鍵字

    • 如果我們的方法要使用 data 中的資料，必須使用關鍵字 this 來指定 Vue 物件之後才能使用 data 中的資料，不然他會顯示資料沒有定義。

      https://i.imgur.com/00UXLg0.png